﻿@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_adminLayout.cshtml";
}
<style>
    .cutpage-boxview {
        overflow: scroll;
        flex-grow: 1;
        box-sizing: border-box;
        width:600px;
        height: 600px;
        display: flex;
        flex-direction: column;
        position:relative;
    }

    .cut-mask {
        background-color: rgba(0, 0, 0, 0.6);
        flex-grow: 1;
    }

    .cut-box {
        position: relative;
        width: 300px;
    }

    .cut-box-border-topleft, .cut-box-border-topright, .cut-box-border-bottomleft,
    .cut-box-border-bottomright {
        border-style: solid;
        border-color: #1aad19;
        width: 30px;
        height: 30px;
        border-width: 0;
        position: absolute;
    }

    .cut-box-border-topleft {
        border-top-width: 2px;
        border-left-width: 2px;
        top: 0;
        left: 0;
    }

    .cut-box-border-topright {
        border-top-width: 2px;
        border-right-width: 2px;
        top: 0;
        right: 0;
    }

    .cut-box-border-bottomleft {
        border-bottom-width: 2px;
        border-left-width: 2px;
        bottom: 0;
        left: 0;
    }

    .cut-box-border-bottomright {
        border-bottom-width: 2px;
        border-right-width: 2px;
        bottom: 0;
        right: 0;
    }

    .cut-img {
        position: absolute;
        z-index: -1;
        width:400px;
        top:100px;
        left:50%;
        transform:translate(-50%);
    }
    .page{
        height:1000px;
        width:800px;
        border:1px solid red;
        display:flex;
    }
    .botmenu{
        height:200px;
        background-color:#1aad19;
    }
</style>
<h2>Test</h2>

@*<div style="width: 300px; height: 300px; background: url(https://www.see2eyes.cn/images/userupload/20170913091026926.jpg) no-repeat #ff6a00;background-size:cover;position:relative;">
     <div style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,0.8)"></div>
        <img src="http://localhost:3125/Qrcode/ColorQrcodeByTxt?txt=张三%0A李四asdsdfdsf&b=1&png=1" style="width:100%;height:100%;position:absolute;top:0;left:0;" />
    </div>*@

<div style="width: 500px; height: 300px; background: url(https://reed2.infosalons.com.cn/reg/images/oi/2.png) no-repeat #fff; background-size: cover; position: relative;">
    <img src="http://localhost:3125/Qrcode/ColorQrcodeByTxt?txt=张三%0A李四asdsdfdsf&b=1&png=1&c=%23000000" style="width:100px;position:absolute;top:0;left:0;" />
</div>
<div class="page" style="display:none;">
    <div class="cutpage-boxview">
        <img src="https://www.see2eyes.cn/images/userupload/20170911075554296.jpg" class="cut-img" />
        <div class="cut-mask"></div>
        <div id="innerbox" style="display:flex;height:300px;">
            <div class="cut-mask"></div>
            <div class="cut-box">
                <div class="cut-box-border-topleft "></div>
                <div class="cut-box-border-topright "></div>
                <div class="cut-box-border-bottomleft "></div>
                <div class="cut-box-border-bottomright "></div>


            </div>
            <div class="cut-mask"></div>
        </div>
        <div class="cut-mask"></div>

    </div>
    <div class="botmenu"></div>
</div>